    <!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Flask-DataTables</title>

    <link href="https://cdn.bootcss.com/datatables/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
	
</head>


<body>
	<div class="container">
	<table id='example' class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            {% for field in fields %}
            <th>{{ field }}</th>
            {% endfor %}
        </tr>
    </thead>

    <tfoot>
        <tr>
            {% for field in fields %}
            <th>{{ field }}</th>
            {% endfor %}
        </tr>
    </tfoot>
	</table>
	</div>

    <script>
    $(document).ready(function() {
    	 table = $('#example').DataTable( {
    		ajax: "{{ url_for('get_server_data',fields = fields )}}",
            columnDefs: [
                {
                    orderable: false, 
                    targets: [0] 
                },
                { 
                    searchable: false, 
                    targets: [0] 
                }, 
                { 
                    className: 'dt-right', 
                    targets: '_all' 
                } ],
    	});
    } );
    </script>
</body>


</html>
